<template>
	<view v-if="userInfo.dianpu">
		<!-- 用户信息 -->
		<view class="user-box">
			<view class="user-info">
				<view class="user-avatar">
					<u-avatar :src="userInfo.avatar" mode="square"></u-avatar>
				</view>
				<view class="user-name">
					<text>{{ userInfo.dianpu.name }}</text>
				</view>
			</view>
			<!-- 访客数据 -->
			<view class="user-list">
				<view class="user-item">
					<view class="user-item-title">{{ realtimeinfo.today_visit_count || 0 }}</view>
					<view class="user-item-content">今日访客量</view>
				</view>
				<view class="user-item">
					<view class="user-item-title">{{ realtimeinfo.today_pay_count || 0 }}</view>
					<view class="user-item-content">今日支付订单数</view>
				</view>
				<view class="user-item border-r">
					<view class="user-item-title">{{ realtimeinfo.today_pay_amount || 0 }}</view>
					<view class="user-item-content">今日支付金额</view>
				</view>
				<view class="user-item" @tap="showShare = true;">
					<view class="user-item-title">
						<u-icon name="share"></u-icon>
					</view>
					<view class="user-item-content">分享店铺</view>
				</view>
			</view>
		</view>
		<!-- 操作列表 -->
		<view class="main-box">
			<view class="main-list">
				<view class="main-item"  v-for="(item,index) in manage_list" :key="index" @tap="jump(item.path)">
					<view class="main-item-image">
						<image class="image" src="https://fc1tn.baidu.com/it/u=1160754363,3592905831&fm=203&mola=new&crop=v1" ></image>
					</view>
					<view class="main-item-title">
						<view class="item-title">{{item.name}}</view>
						<view class="item-desc">{{item.desc}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<shopro-empty v-else :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="店铺不存在"></shopro-empty>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		data(){
			return {
				showShare:false,
				manage_list:[
					{ name:"店铺管理", path:"/pages/dianpu_admin/dianpu_manage",desc:"店铺基本资料设置" },
					{ name:"商品管理", path:"/pages/dianpu_admin/goods" , desc:"商品上下架管理"},
					{ name:"订单管理", path:"/pages/dianpu_admin/order" , desc:"随时查看订单信息" },
					{ name:"收入资产", path:"/pages/dianpu_admin/wallet", desc:"收入明细查询" },
				],
				realtimeinfo: {}
			}
		},
		computed: {
			...mapState({
				userInfo: ({ user }) => user.userInfo,
			})
		},
		onLoad() {
			this.getRealtimeInfo()
		},
		methods:{
			jump(path,query = {}){
				this.$Router.push({path,query});
			},
			getRealtimeInfo() {
				this.$http('dianpu.realtimeinfo', {
				    dianpu_id: this.userInfo.dianpu.id,
				}).then(res => {
					if (res.code == 1) {
						this.realtimeinfo = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
	}
	.border-r{
		border-right: 1px solid #efefef;
	}
	.user-box{
		padding: 20rpx 30rpx;
		box-shadow: 3px -14px 15px 0;
		font-size: 28rpx;
		background-color: #fff;
		.user-info{
			display: flex;
		}
		
		.user-name{
			margin-left: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			
		}
		.user-list{
			display: flex;
			justify-content: space-between;
			text-align: center;
			font-size: 20rpx;
			color: #aaa;
			margin: 30rpx 0;
			.user-item{
				padding: 0rpx 20rpx;
				.user-item-title{
					font-size: 28rpx;
					font-weight: 20rpx;
					color: #333;
					
				}
			}
		}
		
		
	}
	.main-box{
		margin-top: 30rpx;
		.main-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			.main-item{
				background-color: #fff;
				width: 48%;
				text-align: center;
				font-size: 26rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				display: flex;
				font-size: 20rpx;
				.main-item-title{
					margin-left: 20rpx;
					line-height: 35rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					.item-title{
						font-size: 28rpx;
					}
					.item-desc{
						color: #aaa;
					}
				}
				.main-item-image{
					width: 100rpx;
					height: 100rpx;
					.image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	</style>